<script setup lang="ts">
import { provide } from 'vue';

// 提供响应式断点给整个应用
provide('breakpoints', {
  xs: 480,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1600
});
</script>

<template>
  <router-view></router-view>
</template>

<style>
/* 确保应用占据整个视口 */
html, body, #app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 设置视口相关的元变量 */
:root {
  --vh: 1vh;
  --vw: 1vw;
}

/* 响应式排版 */
html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
}
</style>
